<template>
  <z-paging
    auto-show-back-to-top
    ref="paging"
    v-model="dataList"
    @query="queryList"
    :fixed="false"
    height="100%"
    :hide-empty-view="true"
    :empty-view-error-text="'没有更多了'"
  >
    <block v-for="item in dataList" :key="item.id">
      <coupon-card :item="item" :type="type" :showBtn="false" />
    </block>
  </z-paging>
</template>

<script lang="ts" setup>
import { apiUserCouponList } from "@/api";
import { ref, shallowRef, watch } from "vue";

const props = withDefaults(
  defineProps<{
    type: number | undefined | string;
  }>(),
  {
    type: 0,
  }
);

const paging = shallowRef<any>(null);
const dataList = ref<any>([]);

watch(
  () => props.type,
  () => {
    paging.value.reload();
  }
);

const queryList = async (pageNo: number, pageSize: number) => {
  try {
    const { lists } = await apiUserCouponList({
      type: props.type,
      pageNo,
      pageSize,
    });
    paging.value.complete(lists);
  } catch (e) {
    console.log("报错=>", e);
    //TODO handle the exception
    paging.value.complete(false);
  }
};

 
</script>
